import React,{useEffect ,useState} from 'react'
import { useNavigate }from 'react-router-dom';
import { useDispatch ,useSelector } from 'react-redux';
import axios from '../../Utils/Request';
import '../../Api/DataList';
import { ALLLIST }from '../../Type/SotreItem.d';
import { LISTITEMTYPE ,STORETYPE} from '../../Type/Store.d';
import { Search, Toast ,Sticky ,Swiper ,Grid,CountDown,Image    } from 'react-vant';
import { StarO ,CartO,PointGiftO,GoodsCollectO,ClusterO,BarChartO} from '@react-vant/icons';
import ChildrenItem from '../../Compoment/ChildrenItem';


function Index() {
    const  Navigate = useNavigate();
    const  Dispatch = useDispatch();
    const [value, setValue] = useState('');
    const SwArr = [
    {
        index:1,
        children:[
            {txt:'超市',icon:StarO},
            {txt:'电器',icon:CartO},
            {txt:'百货',icon:PointGiftO},
            {txt:'生鲜',icon:ClusterO},
            {txt:'缴费',icon:GoodsCollectO},
            {txt:'好店',icon:BarChartO},
        ]
    },
    {
        index:2,
        children:[
            {txt:'领劵',icon:StarO},
            {txt:'领津贴',icon:CartO},
            {txt:'新百货',icon:PointGiftO},
            {txt:'交话费',icon:ClusterO},
            {txt:'服饰',icon:GoodsCollectO},
            {txt:'电器',icon:BarChartO},
        ]
    }
    ];
    useEffect(()=>{
        axios.get('/list').then(res=>{
            Dispatch({
                type:ALLLIST,
                payload:res.data.list
            })
        })
    },[])
    const ChildrenList = useSelector((state:STORETYPE)=>state.childrenList) as LISTITEMTYPE[]
    return (
        <div className='Index'>
            <Sticky >
            <Search
                showAction
                label="地址"
                actionText={<div onClick={() => Toast.info(value)}>搜索</div>}
                value={value}
                onChange={setValue}
                placeholder="请输入搜索关键词"
            /></Sticky>
            <div className="demo-swiper">
                <Swiper autoplay={2000} loop={true} >
                    {
                        SwArr.map((item,index)=>{
                            return <Swiper.Item key={index}>
                                        <Grid columnNum={3}>
                                            {item.children.map((v, i) => (
                                                <Grid.Item key={i} icon={<v.icon />} text={v.txt} />
                                            ))}
                                        </Grid>
                                    </Swiper.Item>
                        })
                    }
                    
                </Swiper>
            </div>
            <div className="MiaoSha">
                <h3>京东秒杀 &emsp; <CountDown time={30 * 60 * 60 * 1000} millisecond format="HH:mm:ss:SS">
                        {(timeData) => (
                        <>
                            <span className="block">{timeData.hours}</span>
                            <span className="colon">:</span>
                            <span className="block">{timeData.minutes}</span>
                            <span className="colon">:</span>
                            <span className="block">{timeData.seconds}</span>
                        </>
                        )}
                    </CountDown></h3>
                    <Grid columnNum={6}>
                        {
                            SwArr[0].children.map((item,index)=>{
                                return <Grid.Item icon={<item.icon />} text={item.txt} key={index}/>
                            })
                        }
                        
                    </Grid>
            </div>
            <main>
                <ChildrenItem ChildrenList={ChildrenList}></ChildrenItem>
            </main>
        </div>
    )
}

export default Index